<template>
  <div class="app-container">
    <div style="margin: 20px 0">
      <el-row :gutter="20"  class="chart-box flex justify-content-space-between" style="min-height: 400px">
        <el-col style="margin-top: 20px;" :xs="24" :sm="24" :md="12" :lg="12">
          <div class="flex-auto flex flex-column padding-20" style="background-color: #FFFFFF;border-radius: 10px;margin-right: 10px">
            <div style="padding-bottom: 20px">
              <div class="desc flex align-center">
                 <img style="width: 18px;margin-right: 10px" src="@/assets/static/立项的科研经费总金额.png" alt="">
                 <div>考核年度每百名卫生技术人员立项的科研经费总金额</div>
              </div>
              <div class="formula">计算公式: (科研项目总经费) / (卫生技术人员总数)</div>
            </div>
            <div class="flex-auto">
              <EchartsComponent :options="chartOptions[0]" style=" height: 400px;"></EchartsComponent>
            </div>
          </div>
        </el-col>
        <el-col style="margin-top: 20px;" :xs="24" :sm="24" :md="12" :lg="12">
          <div class="flex-auto flex flex-column padding-20" style="background-color: #FFFFFF;border-radius: 10px;margin-left: 10px">
            <div style="padding-bottom: 20px">
              <div class="desc flex align-center">
                <img style="width: 18px;margin-right: 10px" src="@/assets/static/科研成果转化的金额数.png" alt="">
                <div>考核年度每百名卫生技术人员科研成果转化的金额数</div>
              </div>
              <div class="formula">计算公式: (科技成果转化金额) / (卫生技术人员总数)</div>
            </div>
            <div class="flex-auto">
              <EchartsComponent :options="chartOptions[1]" style=" height: 400px;"></EchartsComponent>
            </div>
          </div>
        </el-col>
      </el-row>
      <div class="card-container">
        <div class="card-title">指标详情</div>
        <div class="card-box">
          <!--  两列图表 -->
          <el-row :gutter="20">
            <el-col style="margin-top: 20px;" :xs="24" :sm="24" :md="12" :lg="12">
              <div class="card-item">
                <img alt="" class="left-icon" src="@/assets/static/立项的科研经费总金额.png">
                <div class="right-content">
                  <div class="sub-title">本年度科研项目立项经费总金额</div>
                  <div class="text">本年度医疗机构获得的所有科研项目的总经费，包括国家级、省级、市级等各类科研项目。</div>
                </div>
              </div>
            </el-col>
            <el-col style="margin-top: 20px;" :xs="24" :sm="24" :md="12" :lg="12">
              <div class="card-item">
                <img alt="" class="left-icon" src="@/assets/static/门诊患者基本药物人次.png">
                <div class="right-content">
                  <div class="sub-title">同期卫生技术人员总数</div>
                  <div class="text">医疗机构中所有从事医疗、护理、医技等工作的专业技术人员数量。</div>
                </div>
              </div>
            </el-col>
            <el-col style="margin-top: 20px;" :xs="24" :sm="24" :md="12" :lg="12">
              <div class="card-item">
                <img alt="" class="left-icon" src="@/assets/static/本年度科技成果转化总金额.png">
                <div class="right-content">
                  <div class="sub-title">本年度科技成果转化总金额</div>
                  <div class="text">医疗机构通过技术转让、许可等方式将科研成果转化为经济效益的总金额。</div>
                </div>
              </div>
            </el-col>
            <el-col style="margin-top: 20px;" :xs="24" :sm="24" :md="12" :lg="12">
              <div class="card-item">
                <img alt="" class="left-icon" src="@/assets/static/评分标准.png">
                <div class="right-content">
                  <div class="sub-title">评分标准</div>
                  <div class="text">根据指标计算结果，结合行业平均水平和历史数据进行综合评估。</div>
                </div>
              </div>
            </el-col>
          </el-row>

        </div>
      </div>
      <div class="card-container">
        <div class="card-title">评分模块</div>
        <div style="margin-left: 10px;margin-top: 20px">
          <div class="input-title">科研项目总经费(万元)</div>
          <el-input v-model="input1" suffix-icon="el-icon-date"></el-input>
        </div>

        <div style="margin-left: 10px;margin-top: 20px">
          <div class="input-title">卫生技术人员总数</div>
          <el-input v-model="input1" suffix-icon="el-icon-date"></el-input>
        </div>

        <div style="margin-left: 10px;margin-top: 20px">
          <div class="input-title">科技成果转化金额(万元)</div>
          <el-input v-model="input1" suffix-icon="el-icon-date"></el-input>
        </div>

        <div style="margin-left: 10px;margin-top: 20px">
          <el-button type="primary">计算评分</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import {ref} from 'vue';
import EchartsComponent from "@/components/ECharts/index.vue";
const input1 = ref('');
const chartOptions = ref([
  {
    title: {
      text: '近五年科研经费趋势'
    },
    tooltip: {
      trigger: 'axis'
    },

    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: 'Video Ads',
        type: 'line',
        stack: 'Total',
        data: [150, 232, 201, 154, 190, 330, 410]
      }
    ]
  },
  {
    title: {
      text: '近五年科研成果转化金额趋势'
    },
    tooltip: {
      trigger: 'axis'
    },

    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: 'Video Ads',
        type: 'line',
        stack: 'Total',
        data: [150, 232, 201, 154, 190, 330, 410]
      }
    ]
  },
]);
</script>
<style lang='scss' scoped>
.app-container {
  height: calc(100vh - 84px);
  overflow-y: scroll;
  /* 针对 WebKit 内核浏览器（如 Chrome、Safari） */
  scrollbar-width: none;
  -ms-overflow-style: none;
  .title {
    padding: 10px 0;
    color: #5a5959;
    font-size: 22px;
    font-weight: bold;
  }
  .chart-box {
    .desc {
      font-size: 18px;
      color: #5a5959;
      font-weight: bolder;
    }

    .formula {
      color: #5a5959;
      padding: 15px 0 0 0;
    }
  }
  .card-container {
    background-color: #FFFFFF;
    margin-top: 20px;
    padding: 20px;
    border-radius: 10px;

    .card-title {
      font-size: 20px;
      margin-left: 10px;
      font-weight: 600;
      color: #5a5959;
      padding-bottom: 10px;
    }

    .card-box {
      display: flex;
      flex-wrap: wrap;
      .card-item {
        padding: 10px 0;
        display: flex;
        .left-icon {
          display: block;
          width: 22px;
          height: 24px;
          margin-right: 10px;
          position: relative;
          top: 5px;
        }

        .right-content {
          .sub-title {
            font-size: 16px;
            color: #000000;
          }

          .text {
            padding-top: 10px;
            font-size: 14px;
            color: #5a5959;
          }
        }
      }
    }

    .input-title {
      color: #5a5959;
      font-size: 14px;
      padding-bottom: 10px;

    }
  }
}
</style>
